<template>
	<view class="container">
		<view class="example">
			<uni-forms ref="form" :model="user" labelWidth="80px">
				<uni-forms-item label="用户昵称" name="nickname">
					<uni-easyinput v-model="user.nickname" placeholder="请输入昵称" />
				</uni-forms-item>
				<uni-forms-item label="手机号码" name="phone">
					<uni-easyinput v-model="user.phone" placeholder="请输入手机号码" />
				</uni-forms-item>
				<uni-forms-item label="性别" name="gender" required>
					<uni-data-checkbox v-model="user.gender" :localdata="sexs" />
				</uni-forms-item>
			</uni-forms>
			<button type="primary" @click="submit">提交</button>
		</view>
	</view>
</template>

<script>
import { getUserProfile } from '@/api/system/user';
import { updateUserProfile } from '@/api/system/user';

export default {
	data() {
		return {
			user: {
				nickname: '',
				phone: '',
				gender: 0
			},
			sexs: [
				{
					text: '男',
					value: 0
				},
				{
					text: '女',
					value: 1
				}
			],
			rules: {
				nickName: {
					rules: [
						{
							required: true,
							errorMessage: '用户昵称不能为空'
						}
					]
				},
				phone: {
					rules: [
						{
							required: true,
							errorMessage: '手机号码不能为空'
						},
						{
							pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
							errorMessage: '请输入正确的手机号码'
						}
					]
				}
			},
			upload: {}
		};
	},
	onLoad() {
		this.getUser();
	},
	onReady() {
		this.$refs.form.setRules(this.rules);
	},
	methods: {
		async getUser() {
			const {
				data: { nickname, gender, phone }
			} = await getUserProfile();
			this.user.nickname = nickname;
			this.user.phone = phone;
			this.user.gender = gender;
			// console.log(typeof this.user.gender)
		},
		async submit(ref) {
			try{
				const user = await this.$refs.form.validate();
				const res = await updateUserProfile(user);
				this.$modal.msgSuccess('修改成功');
				this.$store.dispatch('GetInfo')
			}catch(e){
				throw new Error(e)
			}
		},
		select(res) {
			console.log(res);
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #ffffff;
}

.example {
	padding: 15px;
	background-color: #fff;
}

.segmented-control {
	margin-bottom: 15px;
}

.button-group {
	margin-top: 15px;
	display: flex;
	justify-content: space-around;
}

.form-item {
	display: flex;
	align-items: center;
	flex: 1;
}

.button {
	display: flex;
	align-items: center;
	height: 35px;
	line-height: 35px;
	margin-left: 10px;
}
</style>
